<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">-
		<title>服务项目详情</title>
		<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="js/swiper-2.7.6/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/itemDetail.css" />
		<script type="text/javascript" src="js/common/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/common/baseUrl.js"></script>
		<script type="text/javascript" src="js/common/common.js"></script>
	</head>

	<body class="id-con">
		<div id="header">
			<div class="top">
				<div class="top-left">
					<i class="fa fa-map-marker "></i>
					<a href="javascript:void(0)" class="one">广州</a>
					<a href="javascript:void(0)" class="two">切换城市</a>
				</div>
				<div class="top-right">
					<a class="one">
						<i class="fa fa-user"></i> 朱莉
					</a>
					<a href="javascript:void(0)">退出</a>
					<a href="javascript:void(0)">帮助中心</a>
					<a href="javascript:void(0)">网站导航</a>
					<a href="javascript:void(0)">手机APP</a>
				</div>

			</div>
			<div class="searchBox">
				<div class="search">
					<div class="search-left">
						<a href="homepage.html"><h3>互生 <small>休闲娱乐</small></h3></a>
					</div>
					<div class="search-right">
						<div class="one">
							<input type="text" name="search" id="search" value="" placeholder="输入商家名称、分类或地区" />
							<a onclick="searchfn()">
								<i class="fa fa-search"></i>
							</a>
						</div>　　　
						<div class="two" id="searchkey">
							<script id="hotkey" type="text/html">
								{{each data value}}
								<a href="screen.html?keyWords={{value}}">{{value}}</a>
								{{/each}}
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="shop container clearfix">
			<div class="shop-left fl">
				<div class="preview fl" id="swiper">
					<script id="swiper-script" type="text/html">
						<div class="view-top">
							<img class="top1" src="{{picUrl+data.img[0]}}" alt="">
						</div>
						<div class="view-thumb">
							{{each data.img value index}}
								<img class="{{index==0?'banner thumb-fc fl':'banner thumb-oc'}}" src="{{picUrl+value}}" alt="">
							{{/each}}
						</div>
					</script>
				</div>
				<div class="shop-con fl" >
					<div id="goods-detail">
						<script id="goods-detail-script" type="text/html">
							<div class="tip1">
								<div class="goodsname fl">{{data.goodsName}}</div>
								<% if (data.serviceType == 1) { %>
									<div class="visit fl">上门</div>
								<% } %>
							</div>
							<div class="onsale">{{data.goodsAdvantage}}</div>
							<div class="price">
								<span>价格</span>
								<img class="jinbi" src="img/yhq2.png" alt="">
								<span class="only">{{data.hsPrice}}</span>
								<span class="cost">¥{{data.originalPrice}}</span>
								<img class="pv" src="img/yhq3.png" alt="">
								<span class="jifen">{{data.perPoint}}</span>
							</div>
							<div class="dikou">
								<img class="quan" src="img/yhq1.png" alt="">
								<span class="full">每满{{data.discountMoney}}元可使用10元抵扣券{{data.discountNum}}张</span>
							</div>
							<div class="stime">
								<span class="fl">服务时间</span>
								{{each data.choiceDayVoList value index}}
									<div class="{{index==0?'sldate select fl':'sldate fl'}}" data-date-long="{{value.dateLong}}">
										<div class="week">{{value.weekName}}</div>
										<div class="date">{{value.dateName}}</div>
									</div>
								{{/each}}
							</div>
						</script>
					</div>
						<div class="time" id="time">
							<script id="time-script" type="text/html">
								{{if data.length != 0}}
									{{each data value }}
										<span class="hour">{{value}}</span>
									{{/each}}
								{{/if}}
								{{if data.length == 0}}
									<span>当天暂无服务时间</span>
								{{/if}}
							</script>
						</div>
						<div class="number">
							<span class="fl">数量</span>
							<div class="red fl">-</div>
							<div class="amount fl">1</div>
							<div class="add fl">+</div>
						</div>
						<div class="staff">
							<span class="cansl fl">服务人员(可选)</span>
							<div class="slstaff fl">请选择服务人员</div>
							<div class="cue fl">重要提示:服务人员不能提供服务时,可协商变更</div>
							<div class="staff-box" id="staff-box">
								<script id="staff-script" type="text/html">
									{{if type == 0}}
									 <p class="staff-text">{{data}}</p>
									{{/if}}
									{{if type == 1}}
										{{each data value}}
											<div class="staff-list clearfix fl" data-people-id="{{value.id}}">
												<img class="staffhead fl" src="{{picUrl+value.headUrl}}" alt="">
												<div class="staff-detail fl">
													<div class="staffname">{{value.jobName}}</div>
													<div class="stminor">{{value.servicePost}}</div>
													<div class="stminor">
														<span>{{value.sex==0?'女':'男'}}</span>
														<span class="age">{{value.age}}岁</span>
														<span>从业{{value.workedYears}}年</span>
													</div>
												</div>
											</div>
										{{/each}}
										<div class="confirm fl">确定</div>
									{{/if}}
								</script>
							</div>
						</div>
						<div class="catch" id="catch">
							<script id="catch-script" type="text/html">
								{{each data value}}
									<div class="catch-list fl" data-remove-id="{{value.id}}">
										<img class="sthead fl" src="{{picUrl+value.headUrl}}" alt="">
										<span class="fl">{{value.jobName}}</span>
										<img class="close" src="img/close.png" alt="">
									</div>
								{{/each}}
								<div class="clear-both"></div>
							</script>
						</div>
						<div class="buy">
							<div class="buynow">立即购买</div>
						</div>
						<div class="promise" id="promise">
							<script id="promise-script" type="text/html">
								<span>服务承诺</span>
								{{if data.refundRule == 0}}
									<img src="img/return.png" alt="">
									<span class="tui">随时退</span>
								{{/if}}
								{{if data.refundRule == 1}}
									<img src="img/return.png" alt="">
									<span class="tui">售出不退</span>
								{{/if}}
								{{if data.refundRule == 0}}
									<div class="illu fr">退款规则说明</div>
									<div class="illu-box">
										<p>退款规则使用:</p>
										<p>{{data.refundNotes}}</p>
									</div>
								{{/if}}
							</script>
						</div>
				</div>
			</div>
			<div class="shop-right fr" id="shop-right">
				<script id="shop-right-script" type="text/html">
					<div class="shophead">
						<img src="{{data.shopLogo}}" alt="">
					</div>
					<div class="shopname">
						<span>{{data.shopName}}</span>
						<img src="img/huiz.png" alt="">
					</div>
					<div class="shopcode">
						<span>{{data.entResno}}</span>
					</div>
					<div class="shoptel clearfix">
						<span class="fl">商家电话：</span>
						<div class="minor">{{data.shopPhone}}</div>
					</div>
					<div class="shopadd clearfix">
						<span class="fl">商家地址：</span>
						<div class="minor">{{data.shopAddress}}<a href="bmap.html?shopId={{data.shopid}}&longitude={{longitude}}&latitude={{latitude}}"><span class="map">[地图]</span></a></div>
					</div>
					<div class="busitime clearfix">
						<span class="fl">营业时间：</span>
						{{if data.serviceTimeType == 0}}
							<div class="minor">{{data.serviceRangeTime}}</div>
						{{/if}}
						{{if data.serviceTimeType == 1}}
							{{each data.week value}}
								<div class="minor">周{{value.start}}至周{{value.end}} {{value.startTime}}至{{value.endTime}}</div>
							{{/each}}
						{{/if}}
					</div>
					<div class="connect">
						<img src="img/im.png" alt="">
						<span>联系商家</span>
							<i id="focus-heard" class="{{data.collectState==0?'fa fa-heart-o':'fa fa-heart'}}" aria-hidden="true"></i>
						<span class="focus-shop">关注店铺</span>
					</div>
					<div class="goshop-box">
						<div class="goshop" onclick="Tohref('fitness.html?shopId='+shopId)">进店逛逛</div>
					</div>
				</script>
			</div>
		</div>

		<div class="service container clearfix">
			<div class="sertab clearfix">
				<div class="tab-list tab-service">服务详情</div>
				<div class="tab-list tab-notice">购买须知</div>
				<div class="tab-list tab-pic">图文详情</div>
				<div class="tab-list">
					<a href="#evaluate">用户评价</a>
				</div>
			</div>
			<div class="tab-box">
				<div class="service-box" id="service-box">
					<script id="service-box-script" type="text/html">
						<div class="tab-title">服务详情</div>
						<div class="tab-con">
							{{each data.list1 value}}
								<div class="price-list clearfix">
									<div class="warename fl">{{value.itemName}}</div>
									<div class="warecount fl">1{{value.itemNnit}}</div>
									<div class="wareprice fl">{{value.itemSubtotal}}元</div>
								</div>
							{{/each}}
							<div class="total clearfix">
								<div class="totalcost fl">总价值</div>
								<div class="totalprice fl">{{data.originalPrice}}元</div>
							</div>
							<div class="total clearfix">
								<div class="totalcost hlcolor fl">销售价</div>
								<div class="totalprice hlcolor fl">{{data.hsPrice}}元</div>
							</div>
						</div>
					</script>
				</div>
				<div class="notice-box" id="notice-box">
					<script id="notice-box-script" type="text/html">
						<div class="tab-title">购买须知</div>
						<div class="notice-con clearfix">
							<div class="notice-left fl">
								<div class="notice-key">有效期</div>
								<div class="notice-key">预约信息</div>
								{{if data.aheadNoteArr.length && data.aheadNote}}
									<div class="notice-key"></div>
								{{/if}}
								<div class="notice-key">使用人数</div>
								<div class="notice-key">规则提醒</div>
								<div class="notice-key">商家服务</div>
								<% for(var i = 0; i < data.list3.length-1; i++){ %>
									<% if (data.list3[i] != 0) { %>
										<div class="notice-key"></div>
									<% } %>
								<% } %>
								<div class="notice-key">温馨提示</div>
							</div>
							<div class="notice-right">
								<div class="right-list fl">
									<div class="notice-point fl">·</div>
									<div class="notice-value">{{data.validStartTime}}至{{data.vaildEndTime}}</div>
								</div>
								<div class="right-list fl">
									<div class="notice-point fl">·</div>
									{{if data.bookFlag==1}}
										{{if data.aheadNote}}
											<div class="notice-value">请您提前{{data.aheadNote}}预约</div>
										{{/if}}
										{{if data.aheadNoteArr.length}}
											<div class="notice-point fl">·</div>
											<div class="notice-value">{{data.aheadNoteArr[0]}}请提前{{data.aheadNoteArr[1]}}{{data.aheadNoteArr[2]}}</div>
										{{/if}}
									{{/if}}
									{{if data.bookFlag==0}}
										<div class="notice-value">不需要预约</div>
									{{/if}}
								</div>
								<div class="right-list fl">
									<div class="notice-point fl">·</div>
									<div class="notice-value">每张团购券最多{{data.applyNumber}}人使用</div>
								</div>
								<div class="right-list fl">
									<div class="notice-point fl">·</div>
									<div class="notice-value">{{data.useRule}}</div>
								</div>
								<div class="right-list fl">
									<% for(var i = 0; i < data.list3.length; i++){ %>
										<div class="notice-point fl">·</div>
										<div class="notice-value">{{data.list3[i]==1?'提供免费WiFi':data.list3[i]}}</div>
									<% } %>
								</div>
								<div class="right-list fl">
									<div class="notice-point fl">·</div>
									<div class="notice-value">{{data.reminder}}</div>
								</div>
							</div>
						</div>
					</script>
				</div>
				<div class="pic-box" id="pic-box">
					<script id="pic-box-script" type="text/html">
						<div class="tab-title">图文详情</div>
						<p>{{data.goodsDetail}}</p>
						{{each data.img value}}
							<img src="{{picUrl+value}}" alt="">
						{{/each}}
					</script>
				</div>
			</div>
			<div id="evaluate" class="evaluate container">
				<div class="eva-title">用户评价</div>
				<div class="rate clearfix" id="rate">
					<script id="rate-script" type="text/html">
						<div class="ratenum fl">{{data.pingfen}}</div>
						<div class="ratestar fl">
							<div class="comprate">综合评分</div>
							<div class="star">
								<% for(var i = 0; i < data.round; i++){ %>
									<i class="fa fa-star" aria-hidden="true"></i>
								<% } %>
								<% for(var i = 0; i < data.cha; i++){ %>
									<i class="fa fa-star-o" aria-hidden="true"></i>
								<% } %>
							</div>
						</div>
						<div class="percent fl">好评率{{data.evaluateValue}}</div>
						<div class="evabox">
							<div class="eva-list active" data-status="0">全部（{{data.nums}}）</div>
							<div class="eva-list" data-status="1">好评（{{data.goodsV}}）</div>
							<div class="eva-list" data-status="2">差评（{{data.badV}}）</div>
							<div class="eva-list" data-status="3">有图（{{data.hasPic}}）</div>
						</div>
					</script>
				</div>
				<div class="foureva" id="foureva">
					<div class="alleva-box">
						<div id="usereva-box">
							<script id="usereva-box-script" type="text/html">
								{{each data value}}
									<div class="usereva clearfix">
											<img class="userhead fl" src="{{picUrl+value.userHeadUrl}}" alt="">
											<div class="usereva-right fr">
												<div class="eva-date clearfix">
													<div class="date-left fl">
														<div class="username">{{value.userName}}</div>
														<div class="star">
															<% for(var i = 0; i < value.evaluateValue; i++){ %>
																<i class="fa fa-star" aria-hidden="true"></i>
															<% } %>
															<% for(var i = 0; i < value.cha; i++){ %>
																<i class="fa fa-star-o" aria-hidden="true"></i>
															<% } %>
														</div>
													</div>
													<div class="rightdate fr">{{value.evaluateTime}}</div>
												</div>
												<div class="eva-con">{{value.evaluateContent}}</div>
												<div class="eva-pic">
													<% for(var i = 0; i < value.evaluateImgs.length; i++){ %>
														<img src="{{picUrl+value.evaluateImgs[i]}}" alt="">
													<% } %>
												</div>
											</div>
									</div>
								{{/each}}
							</script>
						</div>
						<div class="viewmore">查看更多评价<img src="img/viewmore.png" alt=""></div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot" id="foot">
			<p>
				<strong>客服热线： </strong>
				<a href="javascript:void(0)">
					0755-83344111
				</a>
				<span class="foot-adition">2013-2018 </span>
				<span>
				深圳市互生电子商务有限公司
			</span>
				<span>
				粤ICP备案号14100052号
			</span>
			</p>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
		<script type="text/javascript" src="js/artTemplate/template.js"></script>
		<script type="text/javascript" src="js/common/itemDetail.js"></script>
		<script>

			// tab栏
			$(".sertab div").click(function() {
				$(this).css("border-bottom", "2px solid #F93D28").siblings().css("border-bottom", "2px solid #fff")
			})
			$(".tab-service").click(function() {
				$(".service-box").css("display", "block").siblings().css("display", "none")
			});
			$(".tab-notice").click(function() {
				$(".notice-box").css("display", "block").siblings().css("display", "none")
			});
			$(".tab-pic").click(function() {
				$(".pic-box").css("display", "block").siblings().css("display", "none")
			})
			// 评价tab
			$(".evabox div").click(function() {
				$(this).css({
					"background": "url(img/evatab.png) no-repeat",
					"color": "#fff"
				}).siblings().css({
					"background": "none",
					"color": "#000"
				})
			})
		</script>
	</body>

</html>
